<template>
  <div>
    <el-tree
      :data="list"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
    <van-popup v-model:show="stata">
      <van-tabs v-model="active">
        <van-tab title="添加下级">
          <div>
            <van-field label="名称" v-model="form.name" />
            <van-field label="编号" v-model="form.code" />
            <van-button @click="add">提交</van-button>
          </div>
        </van-tab>
        <van-tab title="修改">
          <div>
            <van-field label="名称" v-model="form2.name" />
            <van-field label="编号" v-model="form2.code" />
            <van-field label="上级id" v-model="form2.code" />
            <van-button @click="add1">确认修改</van-button>
          </div>
        </van-tab>
        <van-tab title="删除">
          <button @click="delone">删除</button>
        </van-tab>
      </van-tabs>
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "treecompany",
  data() {
    return {
      active: 2,
      s: 0,
      form: {
        name: "",
        code: "",
        pid: "",
      },
      form2: {
        name: "",
        code: "",
        pid: "",
      },

      stata: false,
      list: [
        {
          name: this.name,
          son: [
            {
              name: this.name,
              children: [
                {
                  name: this.name,
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "son",
        label: "name",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      this.s = 0;
      this.stata = true;
      console.log(data.id);
      this.form.pid = data.id;
      this.form2.pid = data.id;
      this.$emit("changepid", data.id);
    },
    gettree() {
      axios({ url: "treecom", method: "get" }).then((res) => {
        this.list = res.data.list;
      });
    },
    add() {
      axios({ url: "addcompany", method: "post", data: this.form }).then(
        (res) => {
          console.log(res);
        }
      );
    },
    add1() {
      axios({ url: "xiucom", method: "post", data: this.form2 }).then((res) => {
        console.log(res);
      });
    },
    getdata() {
      axios({
        url: "getone",
        method: "get",
        params: { id: this.form.pid },
      }).then((res) => {
        this.form2.name = res.data.list.name;
        this.form2.code = res.data.list.code;
        this.form2.pid = res.data.list.pid;
      });
    },
    delone() {
      axios({ url: "delcom", method: "post", data: this.form.pid }).then(
        (res) => {
          console.log(res);
        }
      );
    },
  },
  mounted() {
    this.gettree();
    this.getdata();
  },
};
</script>

<style scoped></style>
